<template>
  <div class="auth-container">
    <div class="left">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane v-if="roleShow" label="角色授权" name="role">
          <el-table
            ref="roleTable"
            border
            height="350"
            :data="allRoleData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleRoleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="name"
              label="角色名称"
              width="180"
            />
            <el-table-column
              prop="code"
              label="编码"
              width="220"
              show-overflow-tooltip
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="功能权限" name="resource">
          <el-table
            :data="allResourceData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            height="350"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @selection-change="handleResourceSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="name"
              label="菜单名称"
              sortable
              width="280"
            />
            <el-table-column
              prop="buttons"
              label="按钮"
            >
              <template slot-scope="scope">
                <el-row>
                  <el-checkbox-group v-model="checkBtnList">
                    <el-checkbox v-for="btn in scope.row.buttons" :key="btn.id" :label="btn.name" />
                  </el-checkbox-group>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="data">
          <el-table
            :data="allDataData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            height="350"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @selection-change="handleDataSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="name"
              label="部门名称"
              sortable
              width="280"
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <div style="height:40px;text-align:center">已选</div>
      <div style="min-height:300px;">
        <el-card v-if="roleShow" class="box-card">
          <div slot="header" class="clearfix">
            <span>角色</span>
          </div>
          <el-tag
            v-for="tag in originRoleData"
            :key="tag.name"
            closable
            @close="handleCloseRole(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>功能</span>
          </div>
          <el-tag
            v-for="tag in originResourceData"
            :key="tag.name"
            closable
            @close="handleCloseResource(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据</span>
          </div>
          <el-tag
            v-for="tag in originDataData"
            :key="tag.name"
            closable
            @close="handleCloseData(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoles } from '@/api/role'
import { page as menuTree } from '@/api/menu'
import { tree as depTree } from '@/api/depart'

export default {
  name: 'Auth',
  props: {
    tabNames: [
      role, resource, data
    ],
    authType: {
      required: true,
      type: Number,
      default: 0
    },
    authTypeValues: [
      0, 1, 2
    ],
    objectId: {
      required: true,
      type: Number
    },
    selectedRoles: {
      type: Array,
      default: []
    },
    selectedResources: {
      type: Array,
      default: []
    },
    selectedDatas: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      activeName: 'role',
      checkBtnList: [],
      allRoleData: [],
      allResourceData: [],
      allDataData: [],
      originRoleData: [],
      originResourceData: [],
      originDataData: []
    }
  },
  computed: {
    roleShow: {
      get() {
        if (this.authType !== 0) {
          this.activeName = 'role'
          return true
        } else {
          this.activeName = 'resource'
          return false
        }
      }
    }
  },
  created() {
    this.init()
    this.getRoleList()
    this.getResourceList()
    this.getDataList()
  },
  methods: {
    init() {
      this.originRoleData = JSON.parse(JSON.stringify(this.selectedRoles)),
      this.originResourceData = JSON.parse(JSON.stringify(this.selectedResources)),
      this.originDataData = JSON.parse(JSON.stringify(this.selectedDatas))
      this.selectedRoles.forEach(element => {
        this.$refs.roleTable.toggleRowSelection(element, true)
      })
    },
    handleSelected(val) {
      console.log(1)
    },
    getRoleList() {
      getRoles().then(response => {
        this.allRoleData = response.data.data

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getResourceList() {
      menuTree().then(response => {
        this.allResourceData = response.data.data

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getDataList() {
      depTree().then(response => {
        this.allDataData = response.data.data

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleCloseRole(tag) {
      this.selectedRoles.splice(this.selectedRoles.indexOf(tag), 1)
    },
    handleCloseResource(tag) {
      this.selectedResources.splice(this.selectedResources.indexOf(tag), 1)
    },
    handleCloseData(tag) {
      this.selectedDatas.splice(this.selectedDatas.indexOf(tag), 1)
    },
    handleRoleSelectionChange(selectedData) {
      this.originRoleData = JSON.parse(JSON.stringify(selectedData))
    },
    handleResourceSelectionChange(selectedData) {
      this.originResourceData = JSON.parse(JSON.stringify(selectedData))
    },
    handleDataSelectionChange(selectedData) {
      this.originDataData = JSON.parse(JSON.stringify(selectedData))
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-container {
    width: 100%;
    .left {
      width: 70%;
      float: left;
    }
    .right {
      width: 29%;
      float: left;
      border-left:solid 1px #ccc;
      padding: 20px;
      margin-left: 5px;
    }
}
</style>
